<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script src="./js/jquery.js"></script>
    <script>
    //引入jquery库，用$.ajax发起请求
    //Part1 --- 若用回调函数的形式书写，产生回调地狱，不利于代码的维护
    $.ajax({
    url: 'https://api.github.com/',
    // type: 'get',
    success: function (data) {
        console.log('第一层链接请求成功',data);
        $.ajax({
            url: data.emojis_url,//"https://api.github.com/emojis"
            // type: 'get',
            success: function (data2) {
                    console.log('第二层链接请求成功',data2); 
                    //要继续第三层异步请求，越写阅不利于维护
                    //所以需要用同步的形式
                    $.ajax({
                        url: data2.books,//"https://github.githubassets.com/images/icons/emoji/unicode/1f4da.png?v8"
                        // type: 'get',
                        success: function (data3) {
                            console.log('第三层链接请求成功',data3); 
                        },
                        error: function (err) {
                        console.log('请求失败');
                        },
                    });
            },
            error: function (err) {
            console.log('请求失败');
            },
        });
    },
    error: function (err) {
        console.log('请求失败');
    },
    });
    


    /*   
    // Part2 --- 用Promise的写法 对比上边的代码 优化写法
    var promise = new Promise((revolve,reject)=>{
        $.ajax({
            url: 'https://api.github.com/',
            // type: 'get',
            success: function (data) {
                console.log('第一层链接请求成功',data);
                revolve(data);
            },
            error: function (err) {
                console.log('第一层链接请求失败');
                reject(err);
            },
        });
    })

    let promise222 = promise.then((data)=>{
        return new Promise((revolve,reject)=>{
            $.ajax({
                url: data.emojis_url,
                // type: 'get',
                success: function (data2) {
                    console.log('第二层链接请求成功',data2);
                    revolve(data2);
                },
                error: function (err) {
                    console.log('第二层链接请求成功',data2);
                    reject(err);
                }
            });
        })
    }).catch((e)=>{
        
    })

    promise222.then((data2)=>{
        $.ajax({
                url: data2.book,
                // type: 'get',
                success: function (data3) {
                    console.log('第三层链接请求成功',data3);
                },
                error: function (err) {
                    console.log('第三层链接请求失败');
                }
            });
    }).catch(()=>{

    })
*/

/*
  //Part3 --- 进一步优化，函数封装测试
  function promiseCreator(url) {
      return new Promise(function (resolve, reject) {
        $.ajax({
          url: url,
          success: function (data) {
            resolve(data);
          },
          error: function (err) {
            reject(err);
          },
        });
      });
    }

  promiseCreator('https://api.github.com/')
    .then(function (data) {
      console.log(data); //获取第一层数据
      return promiseCreator(data.emojis_url);//"https://api.github.com/emojis"
    })
    .then(function (data2) {
      console.log(data2); //获取第二层数据
      return promiseCreator(data2.book);//"https://github.githubassets.com/images/icons/emoji/unicode/1f4da.png?v8"
    })
    .then(function (data3) {
      console.log(data3); //获取第三层数据
    });
*/
    </script>
  </body>
</html>
